<template>
  <view class="system-box">
    <view class="">
      <view v-for="data in listData" :key="data.image">
        <view class="time">{{ data.createdAt}}</view>
        <system-news :item="data"></system-news>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import SystemNews from '@/components/list/systemNews'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const listData = ref([])
const pageOptions = ref({
  page: 0,
  more: true
})
onMounted(() => {
  initData()
})
onReachBottom(() => {
  if (pageOptions.value.more) {
    initData()
  }
})
const initData = () => {
  $https({
    url: '/center/system/list',
    type: '',
    data: {
      page: pageOptions.value.page + 1,
      pageSize: 10
    }
  }).then(res => {
    if (res.code === 0) {
      listData.value.push(...res.data.items)
      pageOptions.value = {
        page: res.data.pagination.page,
        more: res.data.pagination.more
      }
    }
  })
}
</script>

<style scoped lang="scss">
.system-box{
  background-color: #F9F9F9;
  min-height: 100vh;
  padding: 32rpx;
  .time{
    font-size: 24rpx;
    color: #CCCCCC;
    text-align: center;
    margin: 42rpx 0;
  }
}
</style>
